<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">

		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>car</title>
		<script>
			(function(doc, win) {
				var docEl = doc.documentElement;
				resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
				recalc = function() {
					var clientWidth = docEl.clientWidth;
					if(!clientWidth) return;
					docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
				};
				if(!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
		<link rel="stylesheet" href="css/reset.css">
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			.first {
				width: 16rem;
				height: 8rem;
			}
			
			.first img {
				width: 100%;
				height: 100%;
				background-repeat: no-repeat;
			}
			
			.second {
				width: 16rem;
				height: 2rem;
				background-color: #a32a24;
				font-size: 1rem;
				overflow: hidden;
			}
			
			.second div {
				width: 3rem;
				height: 2rem;
				float: left;
				font-size: 0.7rem;
				text-align: center;
				line-height: 2rem;
				color: gray;
			}
			
			.second button {
				width: 3rem;
				height: 2rem;
				float: left;
				font-size: 0.7rem;
				color: gray;
			}
			
			.second div:nth-of-type(1) img {
				width: 2rem;
				height: 1rem;
				color: black;
				background-repeat: no-repeat;
			}
			
			.second p {
				margin-top: -2rem;
			}
			
			.third {
				width: 16rem;
				height: 25rem;
				overflow: hidden;
			}
			
			.third img:nth-of-type(1) {
				width: 16rem;
				height: 25rem;
				background-repeat: no-repeat;
			}
			
			.third img:nth-of-type(2) {
				width: 16rem;
				height: 12rem;
				margin-top: -11rem;
				background-repeat: no-repeat;
			}
			
			.third img:nth-of-type(3) {
				width: 8rem;
				height: 2rem;
				margin-top: -28rem;
				margin-left: 8rem;
				background-repeat: no-repeat;
			}
			
			.maxfour {
				width: 16rem;
				height: 15rem;
				overflow: hidden;
				background-image: url(images/page1_tab_bg.jpg);
				background: over no-repeat;
			}
			
			.four {
				width: 14rem;
				height: 10rem;
			}
			
			.four1,
			.four2 {
				width: 14rem;
				height: 10rem;
				margin-left: 1rem;
			}
			
			.four11,
			.four12,.four21,.four22 {
				width: 7rem;
				height: 2rem;
				
			}
			.four13,.four23 {
				width: 14rem;
				height: 9rem;
				border:1px solid red;
				overflow: hidden;
				background-repeat: no-repeat;
			}
			
			.four131,
			.four132 {
				width: 14rem;
				height: 9rem;
				background-repeat: no-repeat;
			
			}
			
			.four132 {
				margin-top: -9rem;
				display:none;
			}
			
			.four12 {
				display: none;
				margin-top: -2rem;
			}
			.four21,.four22{
				float: right;
			}
			.four22{
				margin-right: -7rem;
				display: none;
			}
			
			
			.four1{
				display: none;
			}
			.four2 {
				/*display: none;*/
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<div class="first">
				<img src="images/page1_top_bg.jpg" alt="">
			</div>

			<div class="second">
				<div><img src="images/page1_nav_active.png" alt="">
					<p>首页</p>
				</div>
				<button>活动说明</button>
				<button>精彩视频</button>
				<button>访问官网</button>
				<button>中奖名单</button>
			</div>

			<div class="third">
				<img src="images/page1_main_bg.jpg" alt="">
				<img src="images/page1_k4.png" alt="">
				<img src="images/page1_btn_next.png" alt="">
			</div>
			<div class="maxfour">
				<div class="four">
					<div class="four1">
						<img class="four11" src="images/page1_btn_video.png" alt="">
						<img class="four12" src="images/page1_btn_video_active.png"  alt="">
						<div class="four13">
							<img class="four131" src="images/page1_video_poster.png" alt="">
							<video class="four132" src="video/video.mp4" ></video>
						</div>

					</div>
					<div class="four2">
						<img class="four21" src="images/page1_btn_pic.png" alt="">
						<img class="four22" src="images/page1_btn_pic_active.png" alt="">
						<div class="four23">
							<div>
								
							</div>
						</div>
					</div>
				</div>
			</div>

		</div>
	</body>
	<script src="js/jquery-3.1.1.min.js"></script>
	<script>
		var four11 = document.querySelector(".four11");
		var four12 = document.querySelector(".four12");
		var four21 = document.querySelector(".four21");
		var four22 = document.querySelector(".four22");
		var four131 = document.querySelector(".four131");
		four11.onclick = function(){
			four12.style.display = "block";
		}
		$(document).ready(function(){
		  $(".four22").click(function(){
		     $(".four22").toggle();
		  });
		});
		// $(".four21").click(function(){
		// 	$(".four22").toggle();							     
		// });	    

				// four21.onclick = function(){
		// 	four22.style.display = "block";
		// 	// four22.style.display !=four22.style.display;
		// }
	</script>

</html>